<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<head>
    <style>
        body{
            background-image:url("image/bg.png");
            background-size: 100%,100%;
        }

        .mainBox{
            width:600px;
            height: 500px;
            background-color:white;

            top:50%;
            left:50%;
            margin: -300 -250 -250 -300;
            position: absolute;

            text-align: center;
            line-height: 80px;
            padding-top: 40px;

            border-radius: 5%;
            border-color: white;
            border-style: solid;
            border-width: 5px;
            box-shadow: 10px 10px 5px gray;

            color: black;
        }

        .button{
            width: 150px;
            height: 25px;
            background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
            border:none;
            border-radius: 5px;
            box-shadow: 5px 5px 2px gray;
            color: black;
        }
        .button:hover{
            background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
        }
        .userinfo{
            width:300px;
            padding-top: 20px;
            outline: none;
            border: none;
            border-bottom: 3px solid black;
            background-color: rgba(255, 255, 255, 0);
            text-align: center;
        }

    </style>

</head>

<body>
<div class="mainBox">
    <form action="loginServlet" method="post">
        <div>
            <h1>Login</h1>
            <c:if test="${requestScope.loginMsg == null}">
                <h4 style="line-height:25px ;">欢迎登录!</h4>
            </c:if>
            <c:if test="${requestScope.loginMsg != null}">
                <h4 style="line-height:25px ;color: red">${requestScope.loginMsg}</h4>
            </c:if>
            <p><input type="text" placeholder="用户名" class="userinfo" name="username"></p>
            <p><input type="password" placeholder="密码" class="userinfo" name="password"></p>
            <p><input type="text" placeholder="请输入验证码" class="userinfo" name="code"></p>
            <!--从ValidateCodeServlet处获取验证码，直接让图片链接访问ValidateCodeServlet-->
            <p style="line-height:25px;">验证码：<img id="img" src="validateCode" onclick="changeImg()" title="看不清？点击换一张"/></p>
            <!--绑定点击事件，更换验证码，在script中-->

            <p style="line-height:10px;">&nbsp</p>
            <p><input type="submit" value="登录" class="button"></p>
            <p><input type="button" value="注册账号" class="button" onclick='location.href=("signup")'></p>
        </div>
    </form>
</div>
</body>

<script type="text/javascript">
    //如果是从注册页面转过来，则显示提示
    function showInfo(){
        var signMsg='${requestScope.signupMsg}';
        if(signMsg!=='' && signMsg!==null && signMsg!==undefined){
            window.alert('注册成功，欢迎登录!');
        }
        return;
    }
    showInfo();

    function changeImg() {
        document.getElementById("img").src="validateCode?count="+Math.random();
    }
</script>
